import React, { PureComponent } from 'react';
import { LeftPage, LeftTopBox, LeftBottomBox } from './style';
import { ModuleTitle } from '../../style/globalStyledSet';
import { BorderBox12, BorderBox13 } from '@jiaminghi/data-view-react';
import HourlyTraffic from './charts/HourlyTraffic.jsx';
import DailyTraffic from './charts/DailyTraffic.jsx';

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 每时访问量数据（24小时）
      hourlyData: {
        categories: Array.from({length: 24}, (_, i) => i),
        series: [
          {
            name: '访问量',
            data: [1200, 1000, 800, 600, 500, 700, 1500, 2800, 3200, 3500, 3800, 4200, 
                   4800, 5200, 5800, 6200, 5500, 4800, 4200, 3800, 3200, 2800, 2200, 1800]
          }
        ]
      },
      // 每日访问量数据（最近30天）
      dailyData: {
        categories: ['12-1', '12-2', '12-3', '12-4', '12-5', '12-6', '12-7', '12-8', '12-9', '12-10',
                    '12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18', '12-19', '12-20',
                    '12-21', '12-22', '12-23', '12-24', '12-25', '12-26', '12-27', '12-28', '12-29', '12-30'],
        series: [
          {
            name: '每日访问量',
            data: [3200, 3500, 3100, 2800, 3600, 4200, 6800, 3900, 3200, 3800,
                   4100, 3700, 3300, 3900, 4500, 3800, 3600, 4200, 4800, 3900,
                   3700, 4100, 3500, 3800, 4200, 3600, 3300, 3900, 4100, 3800]
          }
        ]
      }
    };
  }

  render() {
    const { hourlyData, dailyData } = this.state;
    return (
      <LeftPage>
        {/* 顶部图表 - 每时访问量透视图 */}
        <LeftTopBox>
          <BorderBox12 className='left-top-borderBox12'>
            <div className='left-top'>
              <ModuleTitle>
                <i className='iconfont'>&#xe78f;</i>
                <span>每时访问量透视图</span>
              </ModuleTitle>
              <div className='title-dis'>
                <span>
                  今日总访问量:
                  <span className='title-dis-keyword'>68,862次</span>
                </span>
                <span>
                  峰值时段:
                  <span className='title-dis-keyword'>18:00-19:00</span>
                </span>
              </div>
              {/* 每时访问量柱状图 */}
              <HourlyTraffic data={hourlyData}></HourlyTraffic>
            </div>
          </BorderBox12>
        </LeftTopBox>

        {/* 底部图表 - 每日访问量可视化 */}
        <LeftBottomBox>
          <BorderBox13 className='left-bottom-borderBox13'>
            <div className='left-bottom'>
              <ModuleTitle>
                <i className='iconfont'>&#xe88e;</i>
                <span>每日访问量可视化</span>
              </ModuleTitle>
              <div className='title-dis'>
                <span>
                  月平均访问量:
                  <span className='title-dis-keyword'>3,847次</span>
                </span>
                <span>
                  增长趋势:
                  <span className='title-dis-keyword'>+12.5%</span>
                </span>
              </div>
              {/* 每日访问量折线图 */}
              <DailyTraffic data={dailyData}></DailyTraffic>
            </div>
          </BorderBox13>
        </LeftBottomBox>
      </LeftPage>
    );
  }
}

export default index;
